<script setup>
import {useRouter} from "vue-router";
import { ElMessage } from 'element-plus'
import {computed, ref, watchEffect} from 'vue';
import {useStore} from "vuex";
import {
  Right,
  Operation,
  Document,
  FullScreen,
} from '@element-plus/icons-vue';

let userpassword = ref("");
const store = useStore();
const router = useRouter();

const data = computed(()=>{
  return JSON.parse(localStorage.getItem('myUsername'));
});

//初始化下标
let finalindex = 0;
const userObj = computed(()=>{
  console.log("data的值为"+data.value);
  for (let i = 0; i < store.state.userList.length; i++) {
    //判断名字是否相同
    if (data.value && data.value === store.state.userList[i].username){
      finalindex = i;
    }
  }
  //返回此对象
  return store.state.userList[finalindex];
})
//点击事件  判断密码输入是否正确
const unlock = function () {
  if (userpassword.value === userObj.value.password){
    localStorage.setItem('lockwindows-status', JSON.stringify(false));
    router.push("/home");
  }else{
    open4();
  }
}
//登陆失败
const open4 = () => {
  ElMessage.error('密码错误,请重试!.')
}
//退出登录事件
const loginAgain = function () {
  localStorage.setItem('lockwindows-status', JSON.stringify(false));
  router.push("/login");
}
//-------------------------------------
//动态时间  初始化currentTime 获取当前的时间
const currentTime = ref(new Date().toLocaleTimeString());

watchEffect(() => {
  currentTime.value = new Date().toLocaleTimeString();
});

setInterval(() => {
  currentTime.value = new Date().toLocaleTimeString();
}, 1000);
//-----------------------------------------
</script>

<template>
  <div class="lockwindows">
      <img src="https://p0.qhmsg.com/t01e417da2bb0d7623d.jpg" width="100%" height="781px">
    <ul>
      <li style="font-size: 80px;text-align: center;font-weight: 300;color: white;margin-bottom: 50px">
        {{ currentTime }}
      </li>
      <li style="text-align: center;font-size: 18px;font-weight: 700">
        {{userObj.username}}
      </li>
      <li class="user-dom">
        <div>
          <div>
            <img :src="userObj.img">
          </div>
        </div>
        <ul>
          <li>
            <input type="password" placeholder="密码" v-model="userpassword" style="height: 100%;width:200px;padding-left: 10px;border-color: white">
            <el-icon style="background-color: white;height: 34px;width: 35px;cursor: pointer;border-bottom-right-radius: 5px;border-top-right-radius: 5px" @click="unlock"><Right /></el-icon>

          </li>
        </ul>
      </li>
      <li style="color: #444444">系统锁屏,请输入密码登陆</li>
      <li>
        <span class="loginAgain" @click="loginAgain" style="color: indianred;cursor:pointer;">退出重新登陆</span>
      </li>
    </ul>
  </div>

</template>

<style scoped>
.lockwindows{
  display: flex;
  justify-content: center;
  align-items: center;
}
.lockwindows>ul{
  position: absolute;
  width: 400px;
}
.lockwindows>ul>li{
  text-align: center;
  margin-bottom: 10px;
}
.user-dom{
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px!important;
}
.user-dom>div{
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: white;
}
.user-dom>div>div{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}
.user-dom>div img{
  width: 100%;
  border-radius: 50%;
}
.user-dom>ul>li{
  display: flex;
  align-items: center;
  height: 30px;
  position: relative;
}
.loginAgain:hover{
  text-decoration:underline;
  color: red!important;
}
</style>